<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 85167
  Date: 2017/12/10
  Time: 11:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜单管理</title>
    <c:import url="/WEB-INF/page/header.jsp"/>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=5xhpjnPl7eqESafPrPkYzj1FDWZTfq9t"></script>
</head>
<body class="gray-bg">
<div class="row" id="l-map" style="height: 100%;width: 100%"></div>
<h4 class="m-t"></h4>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js?v=2.1.4"></script>
<script>
    // 百度地图API功能
    var map = new BMap.Map("l-map");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 14);
    map.enableScrollWheelZoom();
    map.enableInertialDragging();
    var myGeo = new BMap.Geocoder();

    $.ajax({
        url: "/mapDevList",
        dataTyp: "json",
        success: function (data) {
            $.each(data.data, function () {
                console.log(this);
                geocodeSearch(this);
            });
        }
    });

    function geocodeSearch(dev) {
        myGeo.getPoint(dev.address, function (point) {
            if (point) {
                var address = new BMap.Point(point.lng, point.lat);
                addMarker(address, dev);
            }
        }, "北京市");
    }

    // 编写自定义函数,创建标注
    function addMarker(point, dev) {
        var label = new BMap.Label(""+dev.id)
        label.setStyle({ color : "black", fontSize : "12px",fontWeight:"bold" });
        var marker = new BMap.Marker(point, label);
        map.addOverlay(marker);
        marker.setLabel(label);
        var content="设备ID："+dev.id+"</br>设备别名:"+dev.name+"</br>联系电话:"+dev.tel+"</br>联系人:"+dev.userName+"</br>联系地址:"+dev.address;
        addClickHandler(content, marker);
    }

    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(content, e)
            }
        );
    }

    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var opts = {
            width: 250,     // 信息窗口宽度
            height: 120,     // 信息窗口高度
            title: "<h4>设备信息</h4>", // 信息窗口标题
            enableMessage: true//设置允许信息窗发送短息
        };

        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }
</script>
</body>
</html>
